<template>
  <div>
    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>物资管理</el-breadcrumb-item>
        <el-breadcrumb-item>物资入库</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card style="margin-top:20px">
      <!-- 头部表单 -->
      <el-form
          :model="inStocks"
          :inline="true"
          style="margin-top:10px;height:40px"
        >
        <el-form-item label="类型">
          <el-select v-model="inStocks.type" clearable style="width:200px">
            <el-option
              v-for="item in typeOptions "
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="单号">
          <el-input
            v-model="inStocks.inNum"
            style="width: 100px"
            placeholder="请输入入库单号"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="inStocks.status" clearable>
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            style="margin-left:10px"
            v-model="value1"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right">
          </el-date-picker>
        </el-form-item>
        <el-button type="primary" class="el-icon-search" @click="handleSearch" style="margin-left:10px">查询</el-button>
        <el-button @click="handleReset" type="warning" class="el-icon-refresh-left">重置</el-button>
        <el-button type="success" @click="handleAdd" class="el-icon-plus" >入库</el-button>
        <el-button class="el-icon-download" >导出</el-button>
      </el-form>
      <!-- 表格 -->

    <el-table border :data="inStocksList" ref="multipleTable" style="width:1800px;margin:20px auto">
      <el-table-column label="#" align="center" width="100">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column label="入库单号" align="center" width="300">
        <template slot-scope="scope">
          {{ scope.row.inNum }}
        </template>
      </el-table-column>
      <el-table-column label="物资类型" align="center" width="100">
        <template slot-scope="scope">
         <span class="type">{{ scope.row.type|type }}</span>
        </template>
      </el-table-column>
      <el-table-column label="数量" align="center" width="150">
        <template slot-scope="scope">
          {{ scope.row.productNumber }}
        </template>
      </el-table-column>
      <el-table-column label="联系方式" align="center" width="150">
        <template slot-scope="scope">
          {{ scope.row.phone }}
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" width="100">
        <template slot-scope="scope">
        <span class="status">{{ scope.row.status|status }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作员" align="center" width="200">
        <template slot-scope="scope">
          {{ scope.row.operator }}
        </template>
      </el-table-column>
      <el-table-column label="物资提供方" align="center" width="200">
        <template slot-scope="scope">
          {{ scope.row.supplierName }}
        </template>
      </el-table-column>
      <el-table-column label="入库时间" align="center" width="200">
        <template slot-scope="scope">
          {{ scope.row.createTime }}
        </template>
      </el-table-column>
     
      <el-table-column label="操作" align="center" >
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-view">明细</el-button>
          <el-button size="mini" type="text" @click="delete(scope.row.id)" icon="el-icon-s-operation">回收站</el-button>  
        </template>
      </el-table-column>
    </el-table>
                    <!-- 分页区域 -->
        <div class="pagination-container" style="margin-right:60px">
            <el-pagination
                    layout="total,sizes,prev, pager, next,jumper"
                    :total="total"
                    :page-size="this.inStocks.pageSize"
                    :current-page="this.inStocks.pageNum"
                    :page-sizes="[5,10,15,20]"
                    @current-change="handlePageChange"
                    @size-change="handleSizeChange"
            >
            </el-pagination>
        </div>

    </el-card>

  </div>
</template>

<script>
let defaultstocks={
        pageSize:5,
        pageNum:1,
        inNum:"",
        type:"",
        status:"",
        startTime:"",
        endTime:"",
        
}
export default {
  data(){
    return{
      inStocks:Object.assign({},defaultstocks),
      inStocksList:[],
      //选择器
      options: [{value: '0',label: '已入库'}, 
                {value: '1',label: '回收站'}, 
                {value: '2',label: '待审核'}],
      value: '',
      total:null,
      //日期
      pickerOptions: {
        shortcuts: [{
          text: '今天(此刻)',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
            picker.$emit('pick', [start, end]);
          }
        },{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        },{
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近两个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 60);
            picker.$emit('pick', [start, end]);
          }
        },{
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value1:null,
      typeOptions:[
        {label:"捐赠",value:"1"},
        {label:"下拨",value:"2"},
        {label:"采购",value:"3"},
        {label:"借用",value:"4"},
      ],

    }
  },
  created(){
    this.getinStocksList()
  },
   methods:{
    formatDate(now) { 
            var year=now.getFullYear();  //取得4位数的年份
            var month=now.getMonth()+1;  //取得日期中的月份，其中0表示1月，11表示12月
            var date=now.getDate();      //返回日期月份中的天数（1到31）
            var hour=now.getHours();     //返回日期中的小时数（0到23）
            var minute=now.getMinutes(); //返回日期中的分钟数（0到59）
            var second=now.getSeconds(); //返回日期中的秒数（0到59）
            return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second; 
    },
      //获取物资入库列表信息
      async getinStocksList(){
          let res =  await this.$http.get("/inStock/findInStockList",{params:this.inStocks});
          if(res.status===200){
            this.inStocksList = res.data.data.rows
            this.total = res.data.data.total
            this.$message.success("获取物资入库列表信息成功")
          }else{
            this.$message.warning("获取物资入库列表信息失败")
          }
          
      },
            //页码变化
   handlePageChange(val){
       this.inStocks.pageNum = val
       this.getinStocksList()
     },
     //点击一页显示多少条
     handleSizeChange(val){
      this.inStocks.pageSize = val
      this.inStocks.pageNum = 1
      this.getinStocksList()
     },
     //头部搜索功能
     handleSearch(){
       if(this.value1){
        this.inStocks.startTime =  this.formatDate(this.value1[0])
        this.inStocks.endTime = this.formatDate(this.value1[1])
       }
      this.getinStocksList()
      console.log("type=>",this.type)
     },
     //重置功能
     handleReset(){
       this.inStocks=Object.assign({},defaultstocks)
       this.getinStocksList()
     },
     //入库添加功能
     handleAdd(){
       
     },
     //
    },
    filters:{
      type(val){
        if(val===1){
          return "捐赠"
        }else if(val===2){
          return "下拨"
        }else if(val===3){
          return "采购"
        }else{
          return "借用"
        }
      },
      status(val){
        if(val===0){
          return "已入库"
        }else if(val === 1){
          return "回收站"
        }else{
          return "待审核"
        }
      }
    }
}
</script>

<style lang="less" scoped>
  .type{
    text-align: center;
    width: 60px;
    height: 30px;
    line-height: 30px;
    background-color: #F0F9EB;
    color: #AECC3A;
    border-radius: 5px;
    display: inline-block;
  }
  .status{
    text-align: center;
    width: 60px;
    height: 30px;
    line-height: 30px;
    border: 1px solid #4078FF;
    color: #4078FF;
    border-radius: 5px;
    display: inline-block;
    font-size: 13px;
  }
</style>

